<template>
    <Repl v-if="HaveData" @keydown.ctrl.s.prevent="" @keydown.meta.s.prevent="" :ssr="false" :store="store"
        :showCompileOutput="false" :autoResize="true" :clearConsole="false" />
</template>
<script lang="ts" setup>
import { Repl } from "@vue/repl";
import Main from './main.js?raw'
import importMapJson from './import-map.json?raw'
import { onMounted, ref } from 'vue';
import { ReplStore, File } from "@vue/repl";
const HaveData = ref(false);
const store = new ReplStore();


const props = defineProps({
    Codes: {
        tyep: String,
        default: ''
    }
});

onMounted(() => {
    const Codes: any[] = [];
    var CodeStr: string[] = props.Codes.split('<<$$$@#*^^^|||PageSegmentation|||^^^*#@$$$>>');
    for (let i = 0; i < CodeStr.length; i++) {
        const _code = CodeStr[i].split('<<$$^^|^^$$>>');
        Codes.push({
            title: _code[0],
            code: _code[1]
        });
    };
    store.addFile(new File('import-map.json', importMapJson));
    for (let i = 0; i < Codes.length; i++) {
        const element = Codes[i];
        store.addFile(new File(element.title, element.code));
    };
    store.addFile(new File('main.js', Main, true));
    store.state.mainFile = 'main.js';
    store.setActive('App.vue');
    HaveData.value = true;
    store.init();
});

const GetCodes = function () {
    var files = store.getFiles();
    var Codes = [];
    for (const key in files) {
        const element = files[key];
        if (key != 'main.js' && key != 'import-map.json') {
            Codes.push(key + '<<$$^^|^^$$>>' + element);
        };
    };
    return Codes.join('<<$$$@#*^^^|||PageSegmentation|||^^^*#@$$$>>');
};

defineExpose({
    GetCodes
});

</script>
<style lang="less" scoped>
.vue-repl {
    height: 100%;
}
</style>